import React from 'react'

const Login = () => {
    // 初始化表单元素
    const [form] = React.$Vant.Form.useForm()

    //钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 手机号的状态
    const [mobile, setMobile] = React.useState('13012457845')

    const [password, setPassword] = React.useState('123456')

    const onLogin = async () => {
        if (!mobile) {
            React.$Vant.Notify.show({
                type: 'warning',
                message: '请输入手机号'
            })

            return false
        }

        // 手机号正则
        let MobileReg = /(^1[3|4|5|7|8][0-9]{9}$)/

        if (!MobileReg.test(mobile)) {

            React.$Vant.Notify.show({
                type: 'warning',
                message: '手机号输入有误'
            })

            return false
        }

        if (!password) {
            React.$Vant.Notify.show({
                type: 'warning',
                message: '请输入密码'
            })

            return false
        }

        let data = {
            mobile: mobile,
            password: password
        }

        let result = await React.$Api.login(data)

        if (result.code === 1) {
            React.$Vant.Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    // 存储登录信息 第三个参数里面的path属性是指定cookie存储的路径
                    React.$Cookies.save('LoginUser', result.data,{path:'/'})

                    // 跳转
                    navigate('/user/base/index')
                }
            })

            return false
        } else {
            React.$Vant.Notify.show({
                type: 'warning',
                message: result.msg
            })

            return false
        }
    }

    const UpdateMobile = (e) => {
        setMobile(e.target.value)
    }

    const UpdatePassword = (e) => {
        setPassword(e.target.value)
    }

    return (
        <>
            {/* 图标样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css" />

            {/* 布局框架 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

            {/* 主要样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/login.css" />

            <div className="limiter">
                <div className="container-login100" style={{ backgroundImage: " url('/assets/images/img-01.jpg')" }}>
                    <div className="wrap-login100 p-t-190 p-b-30">
                        <React.$Vant.Form className="login100-form validate-form" form={form} onFinish={onLogin}>
                            <div className="login100-form-avatar">
                                <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45">Hello</span>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                                <input className="input100" type="text" name="mobile" value={mobile} placeholder="请输入手机号" onChange={UpdateMobile} />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-user"></i>
                                </span>
                            </div>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                                <input className="input100" type="password" name="password" value={password} placeholder="请输入密码" onChange={UpdatePassword} />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-lock"></i>
                                </span>
                            </div>

                            <div className="container-login100-form-btn p-t-10">
                                <button className="login100-form-btn" type="submit">登 录</button>
                            </div>

                            <div className="text-center w-full p-t-30">
                                <React.$Router.NavLink className="txt1" to="/user/base/register">
                                    立即注册
                                    <i className="fa fa-long-arrow-right"></i>
                                </React.$Router.NavLink>
                            </div>
                        </React.$Vant.Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login